<template>
  <div class="wrong-topic">
    <TopicContent ref="wrongContent" />
  </div>
</template>

<script lang="ts">
import TopicContent from "./components/content.vue";
import { ref, Ref, nextTick } from "vue";
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    studentId: {
      type: String,
      default: "",
    },
  },
  components: {
    TopicContent,
  },
  setup(props) {
    let loading = ref(false);
    let dataSet = ref([]);
    let checkedList: Ref<any[]> = ref([]); // 选中的试题集合
    let wrongContent = ref();
    nextTick(() => {
      wrongContent.value.request({
        lessonId: props.data.type === 1 ? props.data.contractId : props.data.lessonId,
        lessonThirdId: props.data.thirdId,
        studentId: props.studentId,
        correct: 0,
      });
    });
    return { loading, dataSet, checkedList, wrongContent };
  },
};
</script>

<style scoped lang="scss">
.wrong-topic {
  height: 50vh;
  overflow: auto;
  .section {
    flex: 1 1 36px;
    background: #fff;
    padding: 20px 28px;
    .item {
      padding: 20px 20px 0;
      border-radius: 10px;
      border: 1px solid #ebeef6;
      position: relative;
      transition: all 0.25s;
      &.is__selected {
        cursor: pointer;
      }
      &.is__disabled {
        pointer-events: none;
        background: #f9f9f9;
      }
      &.is__checked {
        border-color: #19aea5;
      }
      :deep(.update-icon) .el-checkbox {
        vertical-align: top;
        pointer-events: none;
      }
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      &:hover {
        box-shadow: 0px 2px 11px 0px rgba(23, 18, 45, 0.2);
      }
      .title {
        margin-bottom: 20px;
      }
      .update-icon {
        width: 40px;
        color: #72b22a;
        font-size: 24px;
        line-height: 34px;
        text-align: center;
        background: url("./../../../assets/question/edit-bg.png") no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        img {
          background: #fff;
          border-top-right-radius: 10px;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;
        }
        &:active > i {
          transform: scale(0.95);
        }
      }
      .content-text {
        margin-right: 20px;
        overflow: hidden;
        img {
          display: inline-block;
        }
      }
      .flex-box {
        font-size: 13px;
        display: flex;
        margin-top: 14px;
        .label {
          display: inline-block;
          height: 20px;
          padding: 0 7px;
          color: #3abab3;
          font-size: 12px;
          line-height: 20px;
          background: rgba(58, 186, 179, 0.15);
          border-radius: 4px;
          margin-right: 8px;
        }
        .flex-main {
          flex: auto;
          color: #77808d;
        }
      }
      .footer {
        height: 36px;
        margin: 20px -20px 0;
        font-size: 12px;
        line-height: 36px;
        background: #f2f1f6;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: solid 1px #ebf0fc;
        p {
          float: left;
          margin-left: 18px;
          color: #1a2633;
          span {
            color: #77808d;
          }
          i {
            color: #382a74;
            cursor: pointer;
            &:active {
              opacity: 0.6;
            }
          }
        }
        div {
          float: right;
          padding-right: 20px;
          a {
            display: inline-block;
            padding: 0 10px;
            margin-left: 20px;
            color: #72b22a;
            line-height: 20px;
            border: solid 1px #72b22a;
            border-radius: 12px;
            transition: all 0.25s;
            cursor: pointer;
            &.is__loading {
              pointer-events: none;
              opacity: 0.6;
            }
            &.cart-icon.active {
              color: #faad14;
              border: solid 1px #faad14;
              background: #fff7e9;
              &::before {
                content: "移出试题篮";
              }
            }
            &.cart-icon::before {
              content: "加入试题篮";
              display: inline-block;
            }
          }

          & > i {
            color: #5b7dff;
            font-size: 18px;
            line-height: 36px;
            margin-right: 20px;
            vertical-align: top;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>
